<template>
  <div class="wrapper">
    <nearby-header :street="street"></nearby-header>
    <nearby-option class="option"
                   ref="options"></nearby-option>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <common-skip></common-skip>
    <el-amap vid="amap"
             :plugin="plugin"></el-amap>
  </div>
</template>

<script>
import CommonSkip from 'common/skip/Skip'
import NearbyHeader from './components/Header'
import NearbyOption from './components/Option'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Nearby',
  components: {
    NearbyHeader,
    NearbyOption,
    CommonSkip
  },
  data () {
    let _this = this
    return {
      plugin: [{
        pName: 'Geolocation',
        events: {
          init (o) {
            _this.map = o
            // o 是高德地图定位插件实例
            return new Promise((resolve, reject) => {
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  resolve(result)
                } else {
                  reject(result)
                }
              })
            })
          }
        }
      }],
      locationCity: '',
      locationStreet: '',
      map: ''
    }
  },
  methods: {
    isLocation () {

    },
    getLocation (o) {
      const events = this.plugin[0].events.init(o)
      events.then((res) => {
        o.options.maximumAge = 0
        let city = res.addressComponent.city
        let street = res.addressComponent.street
        city = city.substring(0, city.length - 1)
        this.$localStorage.set('city', city)
        this.$localStorage.set('LocationCity', city)
        this.locationCity = city
        this.locationStreet = street
        this.changeStreet(street)
        this.$localStorage.set('street', street)
        const sellerCity = this.$localStorage.get('city')
        const location = {
          local_city: city,
          select_city: sellerCity,
          longitude: res.position.O,
          latitude: res.position.P,
          page: 1
        }
        this.$localStorage.set('locationData', JSON.stringify(location))
      }).catch((e) => {
        window.close()
      })
    },
    ...mapMutations({
      changeStreet: 'changeStreet'
    })
  },
  computed: {
    ...mapState(['street'])
  },
  watch: {
    locationCity (city) {
      let history = this.$localStorage.get('history')
      if (history !== null) {
        history = JSON.parse(history)
        history[0] = city
        history = [...new Set(history)]
        this.$localStorage.set('history', JSON.stringify(history))
      } else {
        this.$localStorage.set('LocationCity', city)
        const cities = []
        cities.push(city)
        this.$localStorage.set('history', JSON.stringify(cities))
      }
    },
    map (o) {
      const CITY = '定位失败'
      const city = this.$localStorage.get('LocationCity')
      if (city == null || city === CITY) {
        this.getLocation(o)
      } else {
        return false
      }
    },
    locationStreet (street) {
      this.$localStorage.set('street', street)
    }
  },
  activated () {
    this.isLocation()
  }
}
</script>

<style lang="stylus" scoped>
.wrapper
  .nearby-wrap
    position absolute
    top 150px
    left 0
    right 0
    bottom 0
    overflow hidden
    touch-action none

    .container
      height 101%

.option
  margin-top 80px
  box-sizing border-box
  background-color #fff
  z-index 100
</style>
